
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./myinfo.module.less"
import React, { Fragment, useState ,useEffect,useRef} from 'react'
import { Select, DatePicker } from 'antd'
import dayjs from 'dayjs'
import { login,game_record } from "@/apis/user.js"
import {
	Toast,
	InfiniteScroll
} from 'antd-mobile'
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn'); 

const Recharge = (props) => {
	const navigate = useNavigate()
	const containerRef = useRef(null);
	const [selecttime,setselecttime]=useState(0)
	const [starttime, setStarttime] = useState(dayjs());
	const [endtime,setendtime]= useState(dayjs());
	const [botData,setBotData]= useState({});
	const [data,setData]=useState([])
	const [pageobj, setPageobj] = useState({})
	const [page, setPage] = useState(1)
	const dateFormat = 'YYYY-MM-DD';
	const [pageFlag,setpageFlag] = useState(true)
	const [loading,setLoading] = useState(false)

	const [hasMore, setHasMore] = useState(true)
	async function loadMore() {
	//   const append = await mockRequest()
	//   setData(val => [...val, ...append])
	//   setHasMore(append.length > 0)
		// setHasMore(!(page >= 3))
	}
	useEffect(() => {
		getAdapter()
		// window.addEventListener('scroll', handleScroll);
		return ()=>{
			window.removeEventListener('scroll', handleScroll);
		}
	  }, []);
	  const handleScroll = () => {
		const container = containerRef.current;
		if (container) {
		  const docHeight = container.scrollHeight;
		  const windowHeight = container.clientHeight;
		  const scrollTop =  container.scrollTop;
		  if (scrollTop + windowHeight >= docHeight && !loading){
			console.log(99999999)
			console.log(pageFlag)
			if(pageFlag)
			setPage((prve)=>(prve*1)+1)
		  } 
		}
	  };
	  useEffect(() => {
		if (loading) {
		  // 模拟异步加载数据
		  setTimeout(() => {
			setLoading(false);
		  }, 1000);
		}
	  }, [loading]);
	const changeTab =  (current)=>{
		let today = new Date();

		if(current == 0){
			let yesterday = new Date(today);
			yesterday.setDate(today.getDate() - 0);
			setendtime(dayjs())
			setStarttime(dayjs())
		}
		if(current == 1){
			let yesterday = new Date(today);
			yesterday.setDate(today.getDate() - 1);
			setendtime(dayjs())
			setStarttime(dayjs().subtract(1, 'day'))
		}
		if(current == 2){
			let sevenDaysAgo = new Date(today);
			let yesterday = new Date(today);
			sevenDaysAgo.setDate(today.getDate() - 7);
			setendtime(dayjs())
			setStarttime(dayjs().subtract(7, 'day'))
		}
		if(current == 3){
			let thirtyDaysAgo = new Date(today);
			let yesterday = new Date(today);
			thirtyDaysAgo.setDate(today.getDate() - 30);
			setendtime(dayjs())
			setStarttime(dayjs().subtract(30, 'day'))
		}
		setpageFlag(true)
		setselecttime(current) 
		setPage(1)
	}
	useEffect(() => {
		setTimeout(()=>{
			if (window.scrollTo) {
				window.scrollTo(0, 0);
			} else if (document.body.scrollTop) {
				document.body.scrollTop = 0;
			} else {
				document.documentElement.scrollTop = 0;
			}
			document.getElementById('root').scrollIntoView(true);
			document.getElementById('body').scrollIntoView(true);
		},0)
		getAdapter()
		return ()=>{}
	  }, [selecttime]);
	const handleChange=(value)=>{
		console.log(value)
	}
	const handleChange1=(value)=>{
		console.log(value)
	}
	const formatDate = (dater) => {
		const dateString = dater;
		const date = new Date(dateString);
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		const day = date.getDate();
		const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
		return formattedDate
	}
	function onChange(date, dateString) {
		setStarttime(date)
	}
	
	function onChange1(date, dateString) {
		setendtime(date)
	}
	const getAdapter = ()=>{
		Toast.show({
			icon: 'loading',
			content: t('login.title53'),//'加载中'
		  })
		game_record(
			{
				start_time:formatDate(starttime),
				end_time:formatDate(endtime),
				page:page
			}
		).then(res => {
			Toast.clear()
			setLoading(true)
			if (res.status.errorCode == 0) {
				setBotData((res.data))
				setPageobj(res.data.data)
				if(page == 1){
					setData(res.data.data.data)
				}else{
					setData([...data,...res.data.data.data])
				}
				// if(page >= res.data.data.last_page && !loading){
				// 	Toast.show({
				// 		icon: 'loading',
				// 		content: t('p.a4'),
				// 	})
				// 	console.log(666666666666)
				// 	setpageFlag(false)
				// }
			}
		})
	}
	const getAdapter1 = ()=>{
		typeof page == "number" ?  setPage('1') :  setPage(1)
	}
	function topPage(){
		if(page <= 1)return
		setPage((prve)=>prve - 1)
	}
	function bottomPage(){
		setPage((prve)=>prve+1)
	}
	useEffect(() => { 
		getAdapter()
		setpageFlag(true)
	}, [page]);
	const { t } = useTranslation();
	return (
		<React.Fragment>
			<HeaderTitle title={t('record.title15')} right_title={t('agent.title2')}/>
			<div className={style['main']}>
				<div className={style['header_group']}>
					<div className={style['time_group']}>
						<div className={`${style['tgitem']} ${selecttime === 0 ? style['active'] : ''}`} onClick={()=>{changeTab(0)}}>今天</div>
						<div className={`${style['tgitem']} ${selecttime === 1 ? style['active'] : ''}`} onClick={()=>{changeTab(1)}}>昨天</div>
						<div className={`${style['tgitem']} ${selecttime === 2 ? style['active'] : ''}`} onClick={()=>{changeTab(2)}}>7天</div>
						<div className={`${style['tgitem']} ${selecttime === 3 ? style['active'] : ''}`} onClick={()=>{changeTab(3)}}>30天</div>
					</div>
					<div className={style['date-section']}>
					<DatePicker onChange={onChange}  defaultValue={starttime} value={starttime}/>
						<DatePicker onChange={onChange1}  defaultValue={endtime} value={endtime}/>
						<div onClick={()=> getAdapter1()} className={style['date-search']}>{t('record.title2')}</div>
					</div>
					{/* <div className="game_group">
						<Select
						  defaultValue="全部遊戲"
						  style={{ width: '100%',height: '34px' }}
						  onChange={handleChange}
						  options={[
							{ value: '1', label: '全部遊戲' },
							{ value: '2', label: 'CQ9電子' },
							{ value: '3', label: 'Motivation Gaming真人' },
						  ]}
						/>
					</div> */}
					{/* <div className="game_group">
						<Select
						  defaultValue="全部類型"
						  style={{ width: '100%',height: '34px' }}
						  onChange={handleChange1}
						  options={[
							{ value: '1', label: '全部類型' },
							{ value: '2', label: '已結算' },
							{ value: '3', label: '未結算' },
						  ]}
						/>
					</div>  style={{height: 'calc(100% - 170px)'}}*/}
				</div>
				<div className={style['content']}  ref={containerRef}>
					<div className={`${style['table']} ${style['ttt']}`}>
						<div className={style['tbody']}>
							<div className={style['tr']}>
									<div className={style['td1']}>
									{t('record.title22')}
									</div>
									<div className={style['td2']}>
										<span className={style['c92']}>{t('record.title23')}:{botData.betAmount}</span>
										{/* <span className={style['c93']}>{t('new.title1')}:{item.validBetAmount}</span> */}
									</div>
									<div className={style['td3']}>
										{/* {t('record.title12')} */}
										{/* <span  className={style['c94']}>
											{item.betTime}
										</span> */}
										<span  className={style['c94']}>
										{t('record.title24')}:{botData.netAmount}
										</span>
									</div>
									{/* <div className={style['td4']}>{item.betAmount}</div> */}
									{/* <div className={style['td5']}>{t('record.title13')}</div> */}
								</div>
						</div>
					</div>
					<div className={style['table']}>
						{/* <div className={style['thead']}>
							<div className={style['tr']}>
								<div className={style['td']}>{t('record.title8')}</div>
								<div className={style['td']}>{t('record.title9')}</div>
								<div className={style['td']}>{t('record.title10')}</div>
								<div className={style['td']}>{t('record.title11')}</div>
							</div>
						</div> */}
						<div className={style['tbody']}>
						{
								data && data.map((item,index)=>(
									<div className={style['tr']} key={index}>
										<div className={style['td1']}>
											{item.gamename || '无'}
										</div>
										<div className={style['td2']}>
											<span className={style['c92']}>{item.billNo}</span>
											<span className={style['c93']}>{t('new.title1')}:{item.validBetAmount}</span>
										</div>
										<div className={style['td3']}>
											{/* {t('record.title12')} */}
											<span  className={style['c94']}>
												{item.betTime}
											</span>
											<span  className={style['c94']}>
												盈亏:{item.betAmount ?item.betAmount : item.reAmount }
											</span>
										</div>
										{/* <div className={style['td4']}>{item.betAmount}</div> */}
										{/* <div className={style['td5']}>{t('record.title13')}</div> */}
									</div>
								))
							}
							{/* {
								pageobj.total != 0 && 
									<div className={style['tr']}>
										<div className={style['td21']}>{t('p.a0')} {pageobj.last_page} {t('p.a1')}</div>
										<div className={style['td31']}>
											{
												page != 1 ? <div onClick={topPage}>{t('p.a2')}</div> : ''
											}
											<div className={style['p1']}>{page}</div>
											{
												page < pageobj.last_page  && <div onClick={bottomPage}>{t('p.a3')}</div>
											}
										</div>
									</div>
							} */}
						</div>
					</div>
					{
						data && data.length <=0 ? 					
						<div className={style['NoDataGroup']}>
							<div className={style['noData_bg']}></div>
							<p className={style['txt_tit']}>{t('record.title14')}</p>
						</div> : ''
					}
				</div>
			</div>
		</React.Fragment>
	)
}


export default Recharge
